<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div id="app">
    <div>
      <input type="text" v-model="searchTxt" placeholder="输入16进制颜色值"> <button @click="find">查找</button>
    </div>
    <ul class="_2wRYZ-color_list" data-spm-anchor-id="a220o.1000855.0.i6.33e321a7Xm6U8U">
      <li v-for="item of list" class="_1D2r9-item     " data-id="1627207:8457874250"
        :style="'background:' + item.color">
        <div data-id="1627207:8457874250" class="_2Yj8l-shadow_item"></div>
        <div data-id="1627207:8457874250" class="OYV6f-item_content"
          data-spm-anchor-id="a220o.1000855.0.i5.33e321a7Xm6U8U">
          <span data-id="1627207:8457874250" data-spm-anchor-id="a220o.1000855.0.i0.33e321a7Xm6U8U">{{item.num}}
            {{item.text}}</span>
          <span data-id="1627207:8457874250"
            data-spm-anchor-id="a220o.1000855.0.i1.33e321a7Xm6U8U">({{item.subText}})</span>
          <img v-show="item.tag==='hot'" data-id="1627207:8457874250" class="vgLOH-tag_new" style="display:;"
            src="https://gw.alicdn.com/tps/TB1otOAPFXXXXX.XVXXXXXXXXXX-74-42.png" height="21">
          <img v-show="item.tag==='new'" data-id="1627207:7238769167" class="vgLOH-tag_new" style="display:;"
            src="https://gw.alicdn.com/tps/TB1XfyPPFXXXXXqXFXXXXXXXXXX-74-44.png" height="21">
          <!-- <span class="v2yI_-stock_over">售罄</span> -->
        </div>
        <div class="et2_Z-item_selected_tag" v-show="item.diff">RGB总差值绝对值：{{item.diff}}</div>
      </li>

    </ul>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
  <script src="./main.js"></script>
</body>

</html>